import React, { Component } from 'react';
import {
    StyleSheet, Text, View, Image, TouchableOpacity, ScrollView, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common';
import ToastUtil from '../../../../utils/toast';
import { orderStyle, commonStyle, commen } from '../_common/style';
import OrderDetailsService from '../_common/service';
import { ModalCpt } from '../_components/ModalCpt';
import ModalPicDelComponent from '../../../../component/ModalPicDelComponent';
import HTTP from '../../../../utils/http';
import { API, API_GENERATE } from '../../../../config/api.js';

const scale = GLOBAL.SCALE;
const modalPicDelCfg = {
    visible: false,
    uri: null,
    delPress: () => { },
    picPress: () => { }
}

export class DdmxDetailsPage extends Component {
    static navigationOptions = ({ navigation }) => {
        let { orderType } = navigation.state.params || {}
        return {
            headerTitle: (orderType == 'P' ? '采购' : '销售') + '订单-调度信息',
            headerTintColor: '#272727',
            headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#272727' />,
            headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../imgs/goBackEmpty.png')} />),
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center'
            },
            headerStyle: {
                elevation: 0,
                backgroundColor: '#F5F5F5',
                borderBottomWidth: 0,
            },
        }
    };

    constructor(props) {
        super(props);
        this.sendData = this.props.navigation.state.params || {};
        console.log('this.sendData', this.sendData)
        this.state = {
            isVisible: false
        }
        this.sheetsArr = []; //订单列表
        //图片弹框
        modalPicDelCfg.picPress = () => {
            modalPicDelCfg.visible = false;
            modalPicDelCfg.uri = null;
            this.setState({
                previewModalVisible: false,
            });
        }
    }

    async	componentWillMount () {
        this._init();
    }

    componentWillUnmount () {

    }

    //初始调用
    _init = () => {
        this._getData();
    }

    //获取详情数据
    _getData = async () => {
        let rsData = await OrderDetailsService.stockWlDd(this.sendData);
        console.log('物流-调度-数据', rsData);
        if (rsData) {
            this.setState({ data: rsData })
        } else {
            this.setState({ status: 'empty' })
        }
    }

    //模块打开
    _modalCallBack = (data) => {
        this.setState({
            isVisible: data.isVisible
        })
    }
    //
    _showModal = (modalData) => {
        this.sheetsArr = modalData;
        this.setState({
            isVisible: true
        })
    }

    //// 图片点击预览
    _preview = async (fileUrl, extName, type) => {
        const imgData = await OrderDetailsService.stockWlDdImg(fileUrl, extName);
        let { image } = imgData || {};
        console.log('数据流-----1221211221-总', imgData)
        if (imgData) {
            if (type == 'PDF') {
                this.props.navigation.navigate('ContractPdfPage', { finalFileId: 'id', title: '附件信息', pdfData: imgData });
                return false
            }
            modalPicDelCfg.visible = true;
            modalPicDelCfg.delTextHide = true; //隐藏删除
            modalPicDelCfg.uri = image;
            modalPicDelCfg.attachmentModalStyle = { backgroundColor: 'rgba(0,0,0,0)' };
            this.setState({
                previewModalVisible: true
            });

        }
    }


    render () {
        let { data, isVisible } = this.state;
        let { planId, goodsName, planQuantity, dispatchItemList } = data || {};
        return (
            <View style={styles.container}>
                <ScrollView style={{ flex: 1 }}>
                    <View style={styles.itemBox}>
                        <View style={[styles.itemBody]}>
                            <View style={styles.detailsHead}>
                                <View style={[commonStyle.row2, styles.headPd]}>
                                    <Text style={styles.detailsHeadTitle}>委托子项号 {planId}</Text>
                                </View>
                                <View style={[commonStyle.row2, styles.topp]}>
                                    <View style={[commonStyle.row3, { flex: 1 }]}>
                                        <Text style={orderStyle.value}>{goodsName}</Text>
                                    </View>
                                    <View style={[commonStyle.row3, { flex: 1 }]}>
                                        <Text style={orderStyle.lable}>委托量</Text>
                                        <Text style={orderStyle.value}>{planQuantity}吨</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>

                    <View style={styles.itemBox}>
                        <View style={[styles.itemBody]}>
                            {dispatchItemList && dispatchItemList.length && dispatchItemList.map((item, index) => {
                                return (
                                    <View style={styles.bao} key={index}>
                                        <View style={[commonStyle.row2, styles.headPd]}>
                                            <Text style={styles.detailsHeadTitle}>调度号:{item.dispatchNo || ''}</Text>
                                        </View>
                                        <View style={[commonStyle.row3, styles.mb]}>
                                            <View style={[{ flex: 1 }]}>
                                                <Text style={[commen.lable, styles.pb]}>调度量(吨)</Text>
                                                <Text style={orderStyle.value}>{item.dispatchQuantity || '-'}</Text>
                                            </View>
                                            <View style={[{ flex: 1 }]}>
                                                <Text style={[commen.lable, styles.pb]}>运输量(吨)</Text>
                                                <Text style={orderStyle.value}>{item.sheetQuantity || '-'}</Text>
                                            </View>
                                            <View style={[{ flex: 1 }]}>
                                                <Text style={[commen.lable, styles.pb]}>运单号(吨)</Text>
                                                {
                                                    item.sheets ? <Text style={orderStyle.loadColor} onPress={() => { this._showModal(item.sheets || []) }}>[查看运单号]</Text> : '无'
                                                }

                                            </View>
                                        </View>
                                        <View style={[commonStyle.row3, styles.mb]}>
                                            <View style={[{ flex: 2 }]}>
                                                <Text style={[commen.lable, styles.pb]}>结算单位</Text>
                                                <Text style={orderStyle.value}>{item.dispatchCustName || '-'}</Text>
                                            </View>
                                            <View style={[{ flex: 1 }]}>
                                                <Text style={[commen.lable, styles.pb]}>调度时间</Text>
                                                <Text style={orderStyle.value}>{item.createTime && item.createTime.substring(0, 10) || '-'}</Text>
                                            </View>
                                        </View>
                                        <View style={[commonStyle.row3, styles.mb]}>
                                            <View style={styles.loadTitle}>
                                                <Text style={[commen.lable, styles.pb, styles.loadTitle]}>运单附件</Text>
                                            </View>
                                            <View style={[commonStyle.row3, styles.loadBox]}>
                                                {
                                                    item.sheetFile && item.sheetFile.map((item2, index2) => {
                                                        if (item2.fileUrl && item2.fileName) {
                                                            item2.fileNameStr = item2.fileName && item2.fileName.split('.')[1];
                                                            item2.fileNameStr = item2.fileNameStr.toUpperCase();
                                                            return (
                                                                <Text key={index2} style={[orderStyle.loadColor, styles.loadItem]} onPress={() => {
                                                                    if (item2.fileNameStr === 'PDF') {
                                                                        //特殊
                                                                        this._preview(item2.fileUrl, item2.fileNameStr, 'PDF');
                                                                        //this.props.navigation.navigate('ContractPdfPage', { finalFileId: item2.fileId, title: '附件信息' });
                                                                    } else if (item2.fileNameStr === 'JPG' || item2.fileNameStr === 'PNG' || item2.fileNameStr === 'JPEG' || item2.fileNameStr === 'BMP') {
                                                                        this._preview(item2.fileUrl, item2.fileNameStr);
                                                                    } else {
                                                                        ToastUtil.showInfo(`抱歉，暂不支持${item2.fileName}文件类型的预览～`)
                                                                    }
                                                                }}>{item2.fileName || `运单附件`}</Text>
                                                            )
                                                        } else {
                                                            return null;
                                                        }
                                                    })
                                                }
                                                {
                                                    !item.sheetFile||(item.sheetFile&&item.sheetFile.length==0)?<Text>-</Text>:null
                                                }
                                            </View>
                                        </View>
                                        <View style={[commonStyle.row3, styles.mb]}>
                                            <View style={styles.loadTitle}>
                                                <Text style={[commen.lable, styles.pb, styles.loadTitle]}>卸货单附件</Text>
                                            </View>
                                            <View style={[commonStyle.row3, styles.loadBox]}>
                                                {
                                                    item.landingFile && item.landingFile.map((item2, index2) => {
                                                        if (item2.fileUrl && item2.fileName) {
                                                            item2.fileNameStr = item2.fileName && item2.fileName.split('.')[1];
                                                            item2.fileNameStr = item2.fileNameStr.toUpperCase();
                                                            return (
                                                                <Text key={index2} style={[orderStyle.loadColor, styles.loadItem]} onPress={() => {
                                                                    if (item2.fileNameStr === 'PDF') {
                                                                        this._preview(item2.fileUrl, item2.fileNameStr, 'PDF');
                                                                    } else if (item2.fileNameStr === 'JPG' || item2.fileNameStr === 'PNG' || item2.fileNameStr === 'JPEG' || item2.fileName === 'BMP') {
                                                                        this._preview(item2.fileUrl);
                                                                    } else {
                                                                        ToastUtil.showInfo(`抱歉，暂不支持${item2.fileName}文件类型的预览～`)
                                                                    }
                                                                }}>{item2.fileName || `查看附件`}</Text>
                                                            )
                                                        } else {
                                                            return null;
                                                        }
                                                    })
                                                }
                                                {
                                                    !item.sheetFile||(item.landingFile&&item.landingFile.length==0)?<Text>-</Text>:null
                                                }
                                            </View>
                                        </View>
                                        {/* {
                                            item.tools && item.tools.length.map((items, indexs) => {
                                                return (
                                                    <View style={[commonStyle.row2, styles.topp]} key={indexs}>
                                                        <View style={[commonStyle.row3, { flex: 1 }]}>
                                                            <Text style={orderStyle.value}>{items.transToolName || ''}</Text>
                                                            <Text style={orderStyle.xian}>|</Text>
                                                            <View style={[commonStyle.row3, { flex: 1, }]}>
                                                                <Text style={commen.lable}>委托量123 </Text>
                                                                <Text style={orderStyle.value}>500吨</Text>
                                                            </View>
                                                        </View>
                                                    </View>
                                                )
                                            })
                                        } */}
                                    </View>
                                )
                            })}

                        </View>
                    </View>
                </ScrollView >
                <ModalCpt data={{
                    isVisible,
                    type: 'default',
                    bodyData: this.sheetsArr,
                    modalCallBack: this._modalCallBack
                }} />
                <ModalPicDelComponent {...modalPicDelCfg} />
            </View >
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F5F5'
    },
    detailsHead: {
        //...commen.edge
    },
    detailsHeadTitle: {
        fontSize: 14 * scale,
        color: style.color.font1
    },
    detailsHeadText: {
        fontSize: 14 * scale,
        color: style.color.font1
    },
    detailsHeadStatus: {
        fontSize: 14 * scale,
        color: style.color.font1
    },
    topp: {
        marginBottom: 10 * scale
    },

    headPd: {
        paddingTop: 8 * scale,
        paddingBottom: 15 * scale,
    },
    itemBox: {
        ...commen.edge,
        marginBottom: 20 * scale
    },
    itemBody: {
        backgroundColor: style.color.white,
        borderRadius: 4 * scale,
        paddingTop: 15 * scale,
        paddingBottom: 15 * scale,
        marginTop: 5 * scale,
        ...commen.edge,

    },
    bao: {
        paddingBottom: 15 * scale,
        marginBottom: 10 * scale,
        borderBottomWidth: 1 / PixelRatio.get(),
        borderStyle: 'solid',
        borderBottomColor: '#E3E7F0',
    },
    pb: {
        paddingBottom: 5 * scale
    },
    mb: {
        marginBottom: 15 * scale
    },
    loadItem: { marginRight: 15 * scale, marginBottom: 15 * scale },
    loadTitle: { width: 75 * scale },
    loadBox: {
        width: 250 * scale,
        flexWrap: 'wrap',
        display: 'flex',
    }
})